package com.example.myapplication.ui.components


import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalWindowInfo
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.Blue200
import com.example.myapplication.ui.theme.Blue700
import com.google.accompanist.insets.LocalWindowInsets
import com.google.accompanist.systemuicontroller.rememberSystemUiController

// 标题栏高度
val appBarHeight = 56.dp

@Composable
// 传入一个组件
// modifier 非必传
fun TopAppBar(modifier: Modifier = Modifier, content: @Composable () -> Unit) {

    // 系统bar
//        androidx.compose.material.TopAppBar() {
//
//        }

    // 处理状态栏不透明和底部导航栏遮盖内容问题
    // 使用Accompanist插件
    val systemUiController = rememberSystemUiController()
    LaunchedEffect(key1 = Unit) {
        // 初始化时设置状态栏颜色
        // 第一个参数为状态栏颜色,第二个参数为状态栏图标是否必填
        systemUiController.setStatusBarColor(Color.Transparent)
    }


    // 系统状态栏高度转换
    // LocalDensity.current 获取屏幕密度
    val statusBarHeightDp = with(LocalDensity.current) {
        // 将像素转换为DP
        // statusBarHeight.toDp()
        // 使用Accompanist第三方库获取状态栏高度
        LocalWindowInsets.current.statusBars.top.toDp()
    }

    Row(
        // 在有背景的情况下,padding的设置必须在背景之后
        modifier = Modifier
            .background(
                Brush.linearGradient(
                    // MaterialTheme.colors.primary 使用主体中的颜色
                    listOf(
                        Blue200,
                        Blue700
                    )
                )
            )
            // fillMaxWidth横向占比100%
            .fillMaxWidth()
            // 高度需要再加上一个状态栏的高度,避免被状态栏的图标覆盖
            .height(appBarHeight + statusBarHeightDp)
            .padding(top = statusBarHeightDp)
            // then连接两个modifier
            .then(modifier),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        content()
    }
}

